<template>
	<contents
		:heightInclude="['tabBar']"
		class="notice_page"
		:nullData="noticeList.length === 0"
		:nullText="$t('locales.notNotice')"
	>
		<view class="notice_item" v-for="item in noticeList" :key="item.id">
			<view class="time">{{ item.createTime }}</view>
			<view class="body">
				<view class="title">{{ item.title }}</view>
				<view class="content">{{ item.content }}</view>
			</view>
		</view>
	</contents>
</template>

<script>
import { storeNotice } from '@/api/http/store'
export default {
	data() {
		return {
			noticeList: [],
			domainPrefix: ''
		}
	},
	onLoad(opt) {
		this.domainPrefix = opt.domainPrefix || ''
		this.getData()
	},
	methods: {
		getData() {
			storeNotice({
				domainPrefix: this.domainPrefix
			}).then(res => {
				if (res.code === 200) {
					this.noticeList = res.data
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.notice_page {
	.notice_item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 0 30rpx;
		box-sizing: border-box;
		width: 100%;
		.time {
			display: inline-block;
			margin: auto;
			padding: 5rpx 20rpx;
			background-color: rgba($color: #ddd, $alpha: 0.8);
			border-radius: 18px;
			margin: 30rpx 0;
			color: #fff;
		}
		.body {
			background-color: #fff;
			padding: 30rpx;
			border-radius: 12px;
			width: 100%;
			box-sizing: border-box;
			.title {
				font-weight: bold;
				font-size: 30rpx;
				margin-bottom: 15rpx;
			}
			.content {
				color: #555;
			}
		}
	}
}
</style>
